import React from 'react'
import { Spin, Row, Col } from 'antd'
import Condition from 'components/condition'
const { If, Else } = Condition;
import {messages} from "share/common";

import NullCard from "containers/dashboard/dashboard-component/null-card"
import CardTitle from "containers/dashboard/dashboard-component/card-title"
import thirdConsumptionService from "containers/third-consumption/third-consumption.service";
import {message} from "antd/lib/index";

class BusinessTravel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      load: false,
      vendorList: []
    }
  }

  componentWillMount() {
    this.getThirdConsumption();
  }

  getThirdConsumption = () => {
    this.setState({load: true});
    let hideInUrl = window.location.href.indexOf("console-my.huilianyi.com") === -1 && window.location.href.indexOf("console-sg.huilianyi.com") === -1;
    hideInUrl && thirdConsumptionService.getThirdConsumptionList().then(res => {
      let vendorList = [];
      res.data.map(item => {
        item.venItems.length && item.venItems.map(vendorItem => vendorItem.vendorName += item.venName);
        vendorList = vendorList.concat(item.venItems);
      });
      this.setState({vendorList, load: false});
    }).catch(() => {
      message.error(messages("common.error1"));
    })
  };

  handleClickVenItem = (loginUrl) => {
    let windowReference = window.open(); //chrome会阻止在异步调用中进行的window.open()调用
    thirdConsumptionService.thirdConsumptionLogin(loginUrl).then(res => {
      windowReference.location = res.data.url;
    })
  };

  render() {
    const {load, vendorList} = this.state;
    const {removeModule} = this.props;
    return (
      <Spin spinning={load}>
        <CardTitle  cardKey={"9"}
                    title={messages('dashboard.key43'/*商务出行*/)}
                    removeModule={(key) => removeModule(key)}
                    reloadModule={this.getThirdConsumption}/>
        <div className="card-content">
          <Condition>
            <If value={vendorList.length}>
              <div className="third-consumption-content">
                <Row gutter={20}>
                  {
                    vendorList.map((vendor, index) => (
                      <Col span={12} className="vendor-item" key={`venItem-${index}`}
                           onClick={() => this.handleClickVenItem(vendor.loginUrl)}>
                        <div>
                          <span><img src={vendor.vendorIco}/></span>
                          <span>{vendor.vendorName}</span>
                        </div>
                      </Col>
                    ))
                  }
                </Row>
              </div>
            </If>
            <Else>
              <NullCard imgType={"unOpened"} message={messages('dashboard.key168')/*没有开启此功能*/}/>
            </Else>
          </Condition>
        </div>
      </Spin>
    )
  }
}

BusinessTravel.propTypes = {
  removeModule: React.PropTypes.func.isRequired,
};

BusinessTravel.defaultProps={
};

export default BusinessTravel
